<!--
 * @Author: coocase
 * @Date: 2021-03-12 09:33:36
 * @LastEditTime: 2021-05-13 13:10:36
 * @LastEditors: coocase
 * @Description: 搜索列表
 * @FilePath: \git\dami\src\pages\result\result.vue
-->
<template>
    <div class="wrap bacc">
        <Layout class="bacc">
            <Content>
                <div class="title">
                    共
                    <span class="num">40</span>
                    个商品
                </div>
            </Content>
            <Footer class="bacc">
                <Row class="bacc">
                    <Col span="16">
                        <Layout class="bacc">
                            <Content>
                                <div class="selector">
                                    <Row>
                                        <Col span="4" class="key">城市 ：</Col>
                                        <Col span="16" class="value">
                                            <a href="javascript:void(0)" class="tag">北京</a
                                            ><a href="javascript:void(0)" class="tag">上海</a
                                            ><a href="javascript:void(0)" class="tag">深圳</a
                                            ><a href="javascript:void(0)" class="tag">广州</a>
                                            <a href="javascript:void(0)" class="tag">成都</a>
                                            <a href="javascript:void(0)" class="tag">西安</a>
                                        </Col>
                                        <Col span="4" class="ext">更多</Col>
                                    </Row>
                                </div>
                                <div class="selector">
                                    <Row>
                                        <Col span="4" class="key">分类 ：</Col>
                                        <Col span="16" class="value">
                                            <a href="javascript:void(0)" class="tag">音乐</a
                                            ><a href="javascript:void(0)" class="tag">朗诵</a
                                            ><a href="javascript:void(0)" class="tag">独奏</a
                                            ><a href="javascript:void(0)" class="tag">曲苑杂坛</a>
                                            <a href="javascript:void(0)" class="tag">声乐及合唱</a>
                                        </Col>
                                        <Col span="4" class="ext">更多</Col>
                                    </Row>
                                </div>
                                <div class="selector">
                                    <Row>
                                        <Col span="4" class="key">时间 ：</Col>
                                        <Col span="16" class="value">
                                            <a href="javascript:void(0)" class="tag">今天</a>
                                            <a href="javascript:void(0)" class="tag">明天</a>
                                             <DatePicker type="date" placeholder="Select date" style="width: 150px"></DatePicker> -
                                              <DatePicker type="date" placeholder="Select date" style="width: 150px"></DatePicker>
                                        </Col>
                                        <Col span="4" class="ext">更多</Col>
                                    </Row>
                                </div>
                            </Content>
                            <Footer class="bacc list">
                                <Tabs value="hot">
                                    <TabPane label="热门推荐" name="hot">
                                        <result-list :results="results"></result-list>
                                    </TabPane>
                                    <TabPane label="最近开场" name="lasted">
                                        <result-list :results="results"></result-list>
                                    </TabPane>
                                    <TabPane label="最新上架" name="new">
                                        <result-list :results="results"></result-list>
                                    </TabPane>
                                </Tabs>
                            </Footer>
                        </Layout>
                    </Col>
                    <Col span="2">

                    </Col>
                    <Col span="6">
                        <result-sider></result-sider>
                    </Col>
                </Row>
            </Footer>
        </Layout>
    </div>
</template>

<script>
import ResultSider from '@/components/Sider';
import ResultList from './resultList';
export default {
    name: "Result",
    props:['results'],
    components:{
        ResultSider,
        ResultList

    },
    methods:{

    },
    // created:function () {
    //     console.log("result created");
    // },
    // beforeMount: function () {
    //         console.log("result beforeMount");

    // },
    // mounted:function () {
    //     console.log("result页面的值");
    //     console.log(this.results);
    // },
    // updated:function () {
    //     console.log("result Updated");
    //     console.log(this.results);
    // }

};
</script>

<style scoped>
.wrap {
    width: 1200px;
    margin: 0 auto;
}
.title{
    margin: 5px 50px;
    border-bottom: 1px solid #eee;
}
.bacc {
    background-color: #fff;
}
.list{
    padding: 0px;
}
.num {
    color: red;
}
.selector{
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.key{
    font-size: 16px;
}
.tag{
    padding: 0px 20px;
    text-decoration: none;
    color: rgb(0, 0, 0);
}
</style>
